import React, { PureComponent } from 'react'
import { bindActionCreators } from "redux"
import { connect } from 'react-redux'
import { actions, getUser } from '../../store/modules/register'
import Top from '../../components/Top/Top'
import "./register.css"
class Register extends PureComponent {
    render() {
        let title = "Register"
        const {user:{phone,password,nickname}, register: { reqRegisters ,changeUser}, history } = this.props
        // console.log(this.props);
        return (
            <div>
                <Top title={title}></Top>
                <div className="box">phone:    <input type="text" value={phone} onChange={(e)=>changeUser("phone",e.target.value)}/></div>
                <div className="box">nickname: <input type="text" value={nickname} onChange={(e)=>changeUser("nickname",e.target.value)}/></div>
                <div className="box">password: <input type="text" value={password} onChange={(e)=>changeUser("password",e.target.value)}/></div>
                <button onClick={() => reqRegisters(history)}>注册</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    user: getUser(state),
})

const mapDispatchToProps = dispatch => ({
    register: bindActionCreators(actions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Register)